<template>
  <div class="categoryContainer">
    <!-- 搜索框部分 -->
    <SearchContext></SearchContext>
    <van-row marginTop="10px" gutter="20">
      <!-- 测导航栏部分 -->
      <van-col span="5">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="nav.name"
            v-for="(nav, index) in navList"
            :key="nav.id"
            @click="onChange(index, nav.id)"
          />
        </van-sidebar>
      </van-col>
      <!-- 左侧商品信息以及展示区域 -->
      <van-col span="18">
        <img width="100%" :src="imageUrl" alt="" />
        <van-divider
          :style="{
            color: '#666',
            borderColor: '#333',
            padding: '0 20px',
          }"
        >
          {{ titleName }}分类
        </van-divider>

        <!-- 商品展示九宫格 -->
        <van-grid>
          <van-grid-item
            :icon="item.wap_banner_url"
            :text="item.name"
            v-for="item in currenItems"
            :key="item.id"
            @click="toShopList(item.id)"
          />
        </van-grid>
      </van-col>
    </van-row>
  </div>
</template>

<script>
// import request from '../api/request'
import { mapGetters } from "vuex";
export default {
  name: "Classification",
  data() {
    return {
      activeKey: "",
      navId: "",
    };
  },
  mounted() {
    // 通过首页点击导航 路由跳转进入
    let { name } = this.$route.params;
    let result = this.getInitData();
    result.then(
      () => {
        if (name != undefined) {
          // const navName = name.split("=")[1];
          // console.log(this.navList);
          const navIndex = this.navList.findIndex(
            (item) => item.name == name
          );
          this.activeKey = navIndex;
          this.navId = this.navList[navIndex].id;
          // 调用接口返回数据
          this.$store.dispatch("getCurrentGoodList", this.navId.toString());
        }
      },
      () => {}
    );
    this.$bus.$emit('changeFlag',2)
    // this.$forceUpdate()
  },
  methods: {
    async getInitData() {
      try {
        await this.$store.dispatch("getCategoryInitData");
        return "成功";
      } catch (error) {
        return Promise.reject("失败");
      }
      // this.$forceUpdate()
    },
    // 导航栏切换
    onChange(index, id) {
      console.log(index, id);
      this.navId = id.toString();
      this.$store.dispatch("getCurrentGoodList", this.navId);
      // this.$forceUpdate()
    },
    // 点击九宫格跳转商品页面
    toShopList(categoryId) {
      this.$router.push(`/product?id=${categoryId.toString()}`);
    },
  },
  computed: {
    ...mapGetters(["navList", "currentGoodList", "imageUrl", "titleName"]),
    currenItems() {
      return this.currentGoodList;
    },
  },
};
</script>

<style>
</style>